<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>加载天地图标注</title>
	<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
	<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
</head>
<style type="text/css">
	#mapDiv{
		height:600px;
		margin: 10px;
		border: 1px solid #ccc;
	}
	.opt_station_hover{
		background: rgb(77,103,130);
		font-size: 12px;
		width: 150px;
		height: 47px;
		border-radius: 5px;
	}
	.opt_station_hover_ul{
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 23px;
		text-indent: 4px;
		color: white;
		position: relative;
	}
	.opt_station_hover_ul li{
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 23px;
	}
	.opt_station_hover img{
		position: absolute;
		left: 50%;
		margin-left: -5px;
	}
	.opt_li_left{
		width: 65px;
		display: bolck;
		float: left;
		text-align: right;
	}

</style>
<body>

	<div id="mapDiv"></div>

	<script type="text/javascript">
		var map;
		var timer;//悬停的计时器。
		var lnglats;//点数据。
        var customerWinInfo;//鼠标移动上去显示的信息窗口
        var markers = [];

		var lnglats = [
		{"B":"23.1","L":"113.3","PName":"1111","Status":1},
		{"B":"23.2","L":"113.4","PName":"2222","Status":1},
		{"B":"22.9","L":"113.1","PName":"3333","Status":3004},
		{"B":"23.7","L":"113.8","PName":"第四个点","Status":1},
		{"B":"23.8","L":"113.5","PName":"第五个点","Status":1},
		{"B":"23.3","L":"113.2","PName":"第六个点","Status":1},
		{"B":"23.1","L":"113.7","PName":"7777","Status":1},
		{"B":"23.5","L":"113.3","PName":"8888","Status":1}];
		//这是页面需要的数据。实际应用中常用ajax获取。坐标点状态。点的类型。点的名字。


		// function loadData(){
		// 	$.ajaxSettings.async = false;
		// 	$.getJSON('php/loadIcon.php','', function(json, textStatus) {
		// 		lnglats = json;
		// 	});
		// 	$.ajaxSettings.async = true;
		// }

		//加载基本地图和导航
		function loadMap(){
			try {
				map = new TMap("mapDiv"); //初始化地图对象
             	map.centerAndZoom(new TLngLat(113.3893, 23.04954), 10);//设置显示地图的中心点和级别
             	map.enableHandleMouseScroll(); //允许鼠标双击放大地图   
             } catch(err) {
             	alert('天地图加载不成功，请稍候再试！你可以先使用其他功能！');
             }
         }


	  	//鼠标从图标移动出去的时候执行
	  	function onClose() {
	  		clearTimeout(timer);
	  		map.removeOverLay(customerWinInfo);
	  	}


		//把标注点名字画到地图上
		function loadText(){
			var label =[];//标点名字图。
			if (lnglats.length > 0 ) {
				for (var i = 0; i < lnglats.length; i++) {
					var config = {
						text:lnglats[i].PName,
						offset:new TPixel(0,10),
						position:new TLngLat(lnglats[i].L,lnglats[i].B)
					};
        			label[i]=new TLabel(config);//创建地图文本对象
        			label[i].setAnchorPer([0.5,0]);//偏移量
        			label[i].setBorderLine (1);
        			map.addOverLay(label[i]);
        		}
        	}
        }

        //鼠标移动到移动站上面的时候执行
        function onMouseOver(m) {
        	var html = [];
        	var status ='';
        	status = lnglats[m.id].Status == 1?'在线':'不在线';
        	html.push("	<div class='opt_station_hover' id='device_online'>");
        	html.push("		<ul class='opt_station_hover_ul'>");
        	html.push("			<li><span class='opt_li_left'>名称：</span>"+lnglats[m.id].PName +"</li>");
        	html.push("			<li><span class='opt_li_left'>在线状态：</span>"+status +"</li>");
        	html.push("			<img src='images/arrow.png'>");
        	html.push("		</ul>");
        	html.push("	</div>");
        	var config = {
        		offset:new TPixel(3,-60),
        		position:m.getLngLat()
        	};
        	customerWinInfo=new TLabel(config);
        	customerWinInfo.setLabel(html.join(''));
        	customerWinInfo.setAnchorPer([0.5,0]);//偏移量
        	customerWinInfo.getObject().style.zIndex = 10000;
        	map.addOverLay(customerWinInfo);
        	$('.opt_station_hover').parent().css({
        		"border":"none",
        		"padding":"0",
        		"background-color":""
        	});
        }

		//绘制多个marker。
		function drawTMakers(lnglats){
			markers.length = 0;
			if (lnglats.length != 0) {
				var     iconurl ='images/pointOnline.jpg';
				var     iconurl1 = 'images/pointOffline.jpg';
		       icon = new TIcon(iconurl, new TSize(20, 20), {anchor: new TPixel(12, 12)});//两种图标，根据status判断用哪一种。
		       icon1 = new TIcon(iconurl1, new TSize(20, 20), {anchor: new TPixel(12, 12)});

		       for (var i = 0; i < lnglats.length; i = i + 1) {
		       	if (lnglats[i].Status == 1) {
		       		markers[i]  = drawTMaker(lnglats[i],icon);
		       	} else {
		       		markers[i]  = drawTMaker(lnglats[i],icon1);
		       	}
		       	markers[i].id=i;
		       }
		   }
		}

		//往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。
		function drawTMaker(lnglat,icon){
			var marker =  new TMarker(new TLngLat(lnglat.L, lnglat.B), {icon: icon});
			map.addOverLay(marker);
			return marker;
		}



		//加载mouseover与mouseout事件。 
		//iconMakers是已添加的标注对象。
		//lnglats是每个点的数据对象。通常iconMakers的length等于lnglats的length。
		//eventFn是传入 鼠标移动上去要调用哪个函数。默认是onMouseOver。主要是用于鼠标移动到点上可以显示出不同样式的窗口。
		function addTEvent(iconMakers,lnglats,eventFn){
			var arrLen = lnglats.length;
			var i,eventFn = eventFn || onMouseOver;
			for (var i = 0;  i<arrLen; i++) {
				iconMakers[i].id=i;
				// 绑定事件
				(function() {
					var m = iconMakers[i];
					TEvent.addListener(m, "mouseover",function() {
			               timer = setTimeout(mover, 500);//setTimeout不能带参数，所以用下面的方法处理。
			               function mover() {
			               	eventFn(m);
			               }
			           });
					TEvent.addListener(m, "mouseout", onClose);
				})();
			}
		}

		// loadData();//加载数据
		loadMap();//加载地图
		drawTMakers(lnglats);//绘制标注。
		addTEvent(markers,lnglats);//给标注添加事件。
		loadText();//给标注添加名字
	</script>
</body>
</html>